<template>
  <div :class="className" :style="{height:height,width:width}">
    <div style="color:#1797d6;font-size:18px;margin-bottom:18px">高价值专利分布</div>
    <el-table height="280" :header-cell-style="{background:'#eee',color:'black'}" size="mini" :data="raddData" style="width: 100%; border: 1px solid #ebebeb;box-shadow: 4px 4px 4px #efeeee;border-radius:6px">

      <el-table-column align="left" prop="quoteName" width="226" label="高价值专利指标名称" />
      <el-table-column align="left" prop="num" label="数量" />
      <el-table-column align="left" prop="ratio" label="占比" />


    </el-table>




  </div>
</template>

<script>
  import * as echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from './mixins/resize'

  const animationDuration = 3000

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      raddData: {
        type: Array,
        default: function () {
          return []
        }
      },
      height: {
        type: String,
        default: '350px'
      }
    },
    watch: {
      raddData: {
        handler(newV, oldV) {
          console.log("radd",newV)
          if (newV.length != 0) {

            // let indicatorL = newV[0].slice(1)
            // // console.log("indicatorL", indicatorL)
            // let legentArr = newV.slice(1)

            // let alist = []
            // indicatorL.forEach((item, index) => {
            //     let obj = {}
            //     obj.name = item
            //     obj.color = "black"
            //     // obj.lineStyle={
            //     //   color:'rgba(32,126,255,.5)'
            //     // }
            //     // obj.max=
            //     alist.push(obj)
            // })

            // this.indicator = alist

            // let dataList = []
            // let tem = []

            // legentArr.forEach((item, index) => {
            //     let reObj = {}
            //     tem.push(item[0])
            //     reObj.name = item[0]
            //     reObj.value = item.slice(1)
            //     dataList.push(reObj)
            // })

            // this.legendArr = tem
            // this.dataList = dataList

            // this.initChart()

          }

        },
        deep: true
      }
    },
    data() {
      return {
        chart: null,
        indicator: [],
        legendArr: [],
        dataList: [],
        myData: []
      }
    },
    mounted() {
      setTimeout(() => {
      }, 500)

      // })
    },
    beforeDestroy() {
      // if (!this.chart) {
      //     return
      // }
      // this.chart.dispose()
      // this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        let colors = ['rgba(255,150,50,.5)', 'rgba(64,158,255,.5)']

        this.chart.setOption({
          // tooltip: {
          //   trigger: 'axis',
          //   axisPointer: { // 坐标轴指示器，坐标轴触发有效
          //     type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          //   }
          // },

          title: {
            text: '专利类型分布情况'
          },
          color:colors,

          radar: {
            // radius: '66%',
            center: ['50%', '50%'],
            // splitNumber: 8,
            // splitArea: {
            //   areaStyle: {
            //     color: 'rgba(127,95,132,.3)',
            //     opacity: 1,
            //     shadowBlur: 45,
            //     shadowColor: 'rgba(0,0,0,.5)',
            //     shadowOffsetX: 0,
            //     shadowOffsetY: 15
            //   }
            // },
            indicator: this.indicator
            // [
            //   { name: 'Sales', max: 10000 },
            //   { name: 'Administration', max: 20000 },
            //   { name: 'Information Technology', max: 20000 },
            //   { name: 'Customer Support', max: 20000 },

            // ]
          },
          legend: {
            left: 'center',
            top: '40px',
            left: '70%',
            // top:'2',
            // bottom: '10',
            // data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
            data: this.legendArr
          },
          series: [{
            type: 'radar',
            // symbolSize: 0,
            // areaStyle: {
            //   normal: {
            //     shadowBlur: 13,
            //     shadowColor: 'rgba(0,0,0,.2)',
            //     shadowOffsetX: 0,
            //     shadowOffsetY: 10,
            //     opacity: 1
            //   }
            // },
            data: this.dataList,

            // [
            //   {
            //     value: [5000, 7000, 12000, 11000, 15000, 14000],
            //     name: 'Allocated Budget'
            //   },
            //   {
            //     value: [4000, 9000, 15000, 15000, 13000, 11000],
            //     name: 'Expected Spending'
            //   },
            //   {
            //     value: [5500, 11000, 12000, 15000, 12000, 12000],
            //     name: 'Actual Spending'
            //   }
            // ],
            animationDuration: animationDuration
          }]
        })
      }
    }
  }
</script>
